<template>
  <div class="myorder">
    <div class="wrapper">
      <div class="header">
        <router-link
          tag="div"
          to="/my"
          class="header_left iconfont icon-guanbi"
        ></router-link>
        <div class="header_center">{{ title }}</div>
        <div class="header_right"></div>
      </div>
      <div class="goods">
        <van-tabs v-model="active" swipeable>
          <van-tab title="全部">
            <ul>
              <li></li>
              <li v-for="(item, index) in allorder" :key="index">
                <div class="title">
                  {{ item.bigtitle }}
                  <p class="yes" v-show="item.value != 0">已支付</p>
                  <p class="cancel" v-show="item.value == 0">已取消</p>
                </div>
                <div class="body">
                  <div class="body_left">
                    <img :src="item.productImg" alt="" />
                  </div>
                  <div class="body_right">
                    <div class="body_right_title">{{ item.packageName }}</div>
                    <p>出行日期:{{ item.dateone }}</p>
                    <p>份数：{{ item.value }}</p>
                  </div>
                </div>
                <div class="bottom">
                  <div class="paynum">
                    实付：<strong><span>￥</span></strong
                    ><span class="numb"
                      ><strong>{{
                        item.value * item.num * item.price
                      }}</strong></span
                    >
                  </div>
                </div>
              </li>
              <li></li>
            </ul>
          </van-tab>
          <van-tab title="待付款">
            <ul>
              <li></li>
              <li v-for="(item, index) in Tobepaid" :key="index">
                <div class="title">
                  {{ item.bigtitle }}
                  <p class="no">待付款</p>
                </div>
                <div class="body">
                  <div class="body_left">
                    <img :src="item.productImg" alt="" />
                  </div>
                  <div class="body_right">
                    <div class="body_right_title">{{ item.packageName }}</div>
                    <p>出行日期:{{ item.dateone }}</p>
                    <p>份数：{{ item.value }}</p>
                  </div>
                </div>
                <div class="bottom">
                  <div class="paynum">
                    实付：<strong><span>￥</span></strong
                    ><span class="numb"
                      ><strong>{{
                        item.value * item.num * item.price
                      }}</strong></span
                    >
                  </div>
                  <div class="payment" @click="swift(index)">立即支付</div>
                </div>
              </li>
              <li></li>
            </ul>
          </van-tab>
          <van-tab title="待出行">
            <ul>
              <li></li>
              <li v-for="(item, index) in Togo" :key="index">
                <div class="title">
                  {{ item.bigtitle }}
                  <p class="isgo">待出行</p>
                </div>
                <div class="body">
                  <div class="body_left">
                    <img :src="item.productImg" alt="" />
                  </div>
                  <div class="body_right">
                    <div class="body_right_title">{{ item.packageName }}</div>
                    <p>出行日期:{{ item.dateone }}</p>
                    <p>份数：{{ item.value }}</p>
                  </div>
                </div>
                <div class="bottom">
                  <div class="paynum">
                    实付：<strong><span>￥</span></strong
                    ><span class="numb"
                      ><strong>{{
                        item.value * item.num * item.price
                      }}</strong></span
                    >
                  </div>
                  <div class="QRcode" @click="enlarge(index)">
                    <img src="../assets/img/er.jpg" alt="" />
                  </div>
                  <div
                    class="bigcode"
                    v-show="bigimg == index"
                    @click.stop="bigimg = -1"
                  >
                    <p>欢迎扫码{{ index }}</p>
                    <img src="../assets/img/er.jpg" alt="" />
                    <p @click.stop="determine(index)">确定</p>
                  </div>
                </div>
              </li>
              <li></li>
            </ul>
          </van-tab>
          <van-tab title="待评价">
            <ul>
              <li></li>
              <li v-for="(item, index) in Toevaluated" :key="index">
                <div class="title">
                  {{ item.bigtitle }}
                  <p class="rate">待评价</p>
                </div>
                <div class="body">
                  <div class="body_left">
                    <img :src="item.productImg" alt="" />
                  </div>
                  <div class="body_right">
                    <div class="body_right_title">{{ item.packageName }}</div>
                    <p>出行日期:{{ item.dateone }}</p>
                    <p>份数：{{ item.value }}</p>
                  </div>
                </div>
                <div class="bottom">
                  <div class="paynum">
                    实付：<strong><span>￥</span></strong
                    ><span class="numb"
                      ><strong>{{
                        item.value * item.num * item.price
                      }}</strong></span
                    >
                  </div>
                  <div class="gorate" @click="assess(index)">去评价</div>
                </div>
              </li>
              <li></li>
            </ul>
          </van-tab>
        </van-tabs>
      </div>
      <van-loading type="spinner" color="#000" v-show="loading" />
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      title: null,
      bigimg: -1,
      active: 0,
      packageName: null,
      productId: null,
      value: null,
      num: null,
      price: null,
      dateone: null,
      bigtitle: null,
      allorder: null,
      Tobepaid: null,
      Togo: null,
      productImg: null,
      datetwo: null,
      popitemName: null,
      Toevaluated: [],
      loading: false,
    };
  },
  methods: {
    swift(index) {
      this.$router.push(
        "/OrderDetails?index=" + index + "&title=" + this.title
      );
      // packageName="+this.packageName+"&popitemName="+this.popitemName+"&dateone="+this.dateone+"&datetwo="+this.datetwo+"&value="+this.value+"&num="+this.num+"&price="+this.price
    },
    enlarge(index) {
      console.log(index);
      this.bigimg = index;
    },
    //发表评论
    assess(index) {
      console.log(index);
      this.$router.push(
        "/PublishComment?productId=" +
          this.Toevaluated[index].productId +
          "&productImg=" +
          this.Toevaluated[index].productImg+
          "&bigtitle=" +
          this.Toevaluated[index].bigtitle+
          "&index=" +
          index
      );
    },
    determine(index) {
      console.log("取得", index);
      this.loading = true;
      setTimeout(() => {
        this.loading = false;
        this.$toast("扫码成功");
        this.bigimg = -1;
        this.active = 3;

        if (JSON.parse(localStorage.getItem("Toevaluated"))) {
          this.Toevaluated = JSON.parse(localStorage.getItem("Toevaluated"));
        } else {
          this.Toevaluated = [];
        }
        if (JSON.parse(localStorage.getItem("Togo"))) {
          this.Togo = JSON.parse(localStorage.getItem("Togo"));
        }
        
        this.Toevaluated.push({
          bigtitle: this.Togo[index].bigtitle,
          packageName: this.Togo[index].packageName,
          value: this.Togo[index].value,
          num: this.Togo[index].num,
          price: this.Togo[index].price,
          dateone: this.Togo[index].dateone,
          productImg: this.Togo[index].productImg,
          datetwo: this.Togo[index].datetwo,
          popitemName: this.Togo[index].popitemName,
          productId: this.Togo[index].productId,
        });

        window.localStorage.setItem(
          "Toevaluated",
          JSON.stringify(this.Toevaluated)
        );

        this.Togo.splice(index, 1);
        window.localStorage.setItem("Togo", JSON.stringify(this.Togo));
      }, 2000);
    },
  },
  created() {
    this.productId = this.$route.query.productId;
    this.title = this.$route.query.title;
    console.log(this.title);
    this.bigtitle = this.$route.query.bigtitle;
    this.packageName = this.$route.query.packageName;
    this.value = this.$route.query.value;
    this.num = this.$route.query.num;
    this.price = this.$route.query.price;
    this.dateone = this.$route.query.dateone;
    this.productImg = this.$route.query.productImg;
    this.datetwo = this.$route.query.datetwo;
    this.popitemName = this.$route.query.popitemName;
    console.log(this.productImg);
    this.allorder = JSON.parse(localStorage.getItem("allorder"));
    console.log(this.allorder);
    this.Tobepaid = JSON.parse(localStorage.getItem("Tobepaid"));
    this.Togo = JSON.parse(localStorage.getItem("Togo"));

    this.Toevaluated = JSON.parse(localStorage.getItem("Toevaluated"));
  },
};
</script>

<style lang="scss" scoped>
.myorder {
  position: relative;
  .wrapper {
    min-width: 320px;
    max-width: 750px;
    margin: 0 auto;
    .header {
      height: 50px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      background-color: #fff;
      padding: 0 16px;
      position: sticky;
      left: 0;
      top: 0;
      z-index: 5;

      .header_left {
        color: #fc9632;
        font-size: 20px;
        line-height: 50px;
      }
      .header_center {
        font-size: 18px;
      }
      .header_right {
        width: 20px;
      }
    }
    .goods {
      .van-tabs ::v-deep .van-tabs__line {
        background-color: #fc9632;
        width: 90px;
      }
      .van-tabs ::v-deep .van-tabs__content {
        background-color: #f0eee2;
      }
      ul {
        li {
          width: 100%;
          background-color: #fff;
          padding: 1px 0;
          margin: 15px 0;
          .title {
            font-weight: bold;
            font-size: 18px;
            padding: 0 14px;
            line-height: 50px;
            display: flex;
            justify-content: space-between;
            p.yes {
              color: green;
            }
            p.cancel {
              color: grey;
            }
            p.no {
              color: red;
            }
            p.isgo {
              color: #fc9632;
            }
            p.rate {
              color: #ef6305;
            }
          }
          .body {
            padding: 14px 0;
            margin: 0 14px;
            border-top: 1px solid #ccc;
            border-bottom: 1px solid #ccc;
            display: flex;
            .body_left {
              background-color: #fc9632;
              width: 110px;
              height: 80px;
              img {
                width: 100%;
                height: 100%;
              }
            }
            .body_right {
              padding-left: 10px;
              width: 220px;
              .body_right_title {
                display: -webkit-box;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 2;
                overflow: hidden;
                margin-bottom: 8px;
                font-size: 14px;
              }
              p {
                color: #ccc;
                font-size: 12px;
                line-height: 20px;
              }
            }
          }
          .bottom {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0 14px;
            color: #ccc;
            font-size: 14px;
            .paynum {
              line-height: 50px;

              span {
                color: #000;
              }
              span.numb {
                font-size: 20px;
              }
            }
            .QRcode {
              img {
                width: 40px;
                height: 40px;
              }
            }
            .bigcode {
              background-color: rgba(0, 0, 0, 0.717);
              position: fixed;
              top: 0%;
              left: 0px;
              z-index: 5;
              width: 100%;
              height: 100%;
              padding: 0;
              margin: 0 auto;
              display: flex;
              flex-direction: column;
              align-items: center;
              justify-content: center;
              p {
                color: #fc9632;
                font-size: 30px;
                line-height: 100px;
                font-weight: bold;
              }
              img {
                // margin: auto;
                width: 300px;
                height: 300px;
                padding: 0;
              }
            }
            .gorate {
              color: #fff;
              background-color: #fc9632;
              padding: 5px 10px;
              border-radius: 14px;
            }
            .payment {
              color: #fff;
              background-color: #fc9632;
              height: 16px;
              line-height: 16px;
              padding: 10px;
            }
          }
        }
      }
    }
    .van-loading {
      position: fixed;
      top: 50%;
      left: 50%;
      transform: translateX(-50%);
      z-index: 5;
    }
  }
}
</style>